<template>
	<view class="diy-banner">
		<!-- 图片轮播 -->
		<swiper class="swiper-box"
			:style="{paddingRight: `${item.style.paddingRight}px`,paddingLeft: `${item.style.paddingLeft}px`,marginTop: `${item.style.marginTop}px`,marginBottom: `${item.style.marginBottom}px`,height: `${item.style.height}px` }"
			:autoplay="true" :duration="item.duration" :circular="true" :interval="item.interval" @change="_bindChange">
			<swiper-item v-for="(dataItem, index) in item.slideimgs" :key="index">
				<image mode="scaleToFill" class="slide-image" :src="dataItem.img" @click="clickimage(dataItem)" />
				<view class="center" @click="clickimage(dataItem)" v-if="item.isShowvideo == true">
					<image src="/static/video.png" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 指示点 -->
		<view class="indicator-dots">
			<view class="dots-item" :style="{backgroundColor: imgCurrent == index? item.indicatorActiveColor:''}"
				v-for="(dataItem, index) in item.slideimgs.length" :key="index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Banner',

		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			item: {
				type: Object,
				default: {}
			}
		},

		/**
		 * 私有数据,组件的初始数据
		 * 可用于模版渲染
		 */
		data() {
			return {
				imgCurrent: 0 // 当前banne所在滑块指针
			};
		},

		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			/**
			 * 记录当前指针
			 */
			_bindChange(e) {
				this.imgCurrent = e.detail.current;
			},
			clickimage(e) {
				console.log(e)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.diy-banner {
		position: relative;
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx;

		// swiper组件
		.swiper-box {
			height: 100%;
			border-radius: 20rpx;

			.slide-image {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				display: block;
				border-radius: 20rpx;
			}

		}

		.center {
			width: 70rpx;
			height: 70rpx;
			top: 40%;
			left: 0;
			right: 0;
			margin: 0 auto;
			position: absolute;
			z-index: 9999;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		/* 指示点 */
		.indicator-dots {
			width: 100%;
			height: 28rpx;
			padding: 0 20rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx;
			opacity: 0.8;
			display: flex;
			justify-content: center;

			.dots-item {
				width: 16rpx;
				height: 16rpx;
				margin-right: 8rpx;
				background-color: #fff;
				border-radius: 20rpx;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					background-color: #313131 !important;
				}
			}
		}
	}
</style>
